<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon article-icon">
              <el-icon size="32"><Document /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ stats.articles }}</div>
              <div class="stats-label">文章总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon category-icon">
              <el-icon size="32"><Folder /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ stats.categories }}</div>
              <div class="stats-label">分类数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon tag-icon">
              <el-icon size="32"><Collection /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ stats.tags }}</div>
              <div class="stats-label">标签数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon comment-icon">
              <el-icon size="32"><ChatDotSquare /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ stats.comments }}</div>
              <div class="stats-label">评论总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作 -->
    <el-row :gutter="20" class="quick-actions">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
            </div>
          </template>
          <div class="action-buttons">
            <el-button type="primary" :icon="Plus" @click="createArticle">
              写新文章
            </el-button>
            <el-button type="success" :icon="FolderAdd" @click="createCategory">
              新建分类
            </el-button>
            <el-button type="warning" :icon="CollectionTag" @click="createTag">
              新建标签
            </el-button>
            <el-button type="info" :icon="Setting" @click="goToSettings">
              系统设置
            </el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>系统信息</span>
            </div>
          </template>
          <div class="system-info">
            <div class="info-item">
              <span class="info-label">系统版本：</span>
              <span class="info-value">v1.0.0</span>
            </div>
            <div class="info-item">
              <span class="info-label">Vue版本：</span>
              <span class="info-value">3.2.13</span>
            </div>
            <div class="info-item">
              <span class="info-label">Element Plus：</span>
              <span class="info-value">2.4.1</span>
            </div>
            <div class="info-item">
              <span class="info-label">最后登录：</span>
              <span class="info-value">{{ lastLoginTime }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近文章 -->
    <el-row>
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>最近文章</span>
              <el-button type="text" @click="goToArticles">查看全部</el-button>
            </div>
          </template>
          <el-table :data="recentArticles" style="width: 100%">
            <el-table-column prop="title" label="标题" min-width="200" />
            <el-table-column prop="category" label="分类" width="120" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag
                  :type="scope.row.status === '已发布' ? 'success' : 'warning'"
                  size="small"
                >
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="views" label="浏览量" width="100" />
            <el-table-column prop="createTime" label="创建时间" width="180" />
            <el-table-column label="操作" width="150">
              <template #default="scope">
                <el-button type="text" size="small" @click="editArticle(scope.row)">
                  编辑
                </el-button>
                <el-button type="text" size="small" @click="viewArticle(scope.row)">
                  查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 统计数据
const stats = ref({
  articles: 156,
  categories: 12,
  tags: 28,
  comments: 342
})

// 最后登录时间
const lastLoginTime = ref('2024-01-15 14:30:25')

// 最近文章数据
const recentArticles = ref([
  {
    id: 1,
    title: 'Vue 3 Composition API 详解',
    category: '前端开发',
    status: '已发布',
    views: 1234,
    createTime: '2024-01-15 10:30:00'
  },
  {
    id: 2,
    title: 'Spring Boot 微服务架构实践',
    category: '后端开发',
    status: '已发布',
    views: 856,
    createTime: '2024-01-14 16:45:00'
  },
  {
    id: 3,
    title: 'Element Plus 组件库使用指南',
    category: '前端开发',
    status: '草稿',
    views: 0,
    createTime: '2024-01-13 09:15:00'
  },
  {
    id: 4,
    title: 'Docker 容器化部署最佳实践',
    category: '运维部署',
    status: '已发布',
    views: 678,
    createTime: '2024-01-12 14:20:00'
  },
  {
    id: 5,
    title: 'MySQL 性能优化技巧',
    category: '数据库',
    status: '已发布',
    views: 945,
    createTime: '2024-01-11 11:10:00'
  }
])

// 快捷操作方法
const createArticle = () => {
  ElMessage.success('跳转到文章编辑页面')
  // router.push('/articles/create')
}

const createCategory = () => {
  ElMessage.success('打开新建分类对话框')
}

const createTag = () => {
  ElMessage.success('打开新建标签对话框')
}

const goToSettings = () => {
  ElMessage.success('跳转到系统设置页面')
  // router.push('/settings')
}

const goToArticles = () => {
  ElMessage.success('跳转到文章管理页面')
  // router.push('/articles')
}

const editArticle = (article) => {
  ElMessage.success(`编辑文章：${article.title}`)
}

const viewArticle = (article) => {
  ElMessage.success(`查看文章：${article.title}`)
}

onMounted(() => {
  // 这里可以调用API获取真实数据
  console.log('Dashboard mounted')
})
</script>

<style scoped>
.dashboard {
  padding: 0;
}

.stats-row {
  margin-bottom: 20px;
}

.stats-card {
  height: 120px;
}

.stats-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.article-icon {
  background-color: #e3f2fd;
  color: #1976d2;
}

.category-icon {
  background-color: #f3e5f5;
  color: #7b1fa2;
}

.tag-icon {
  background-color: #fff3e0;
  color: #f57c00;
}

.comment-icon {
  background-color: #e8f5e8;
  color: #388e3c;
}

.stats-info {
  flex: 1;
}

.stats-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  line-height: 1;
}

.stats-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.quick-actions {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.action-buttons .el-button {
  flex: 1;
  min-width: 120px;
}

.system-info {
  padding: 10px 0;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  color: #606266;
  font-size: 14px;
}

.info-value {
  color: #303133;
  font-size: 14px;
  font-weight: 500;
}

.el-table {
  margin-top: 10px;
}
</style>
